<template>
  <div class="view-equip-detail-wrap">
    <px-scrollbar class="view-equip-detail">
      <div class="view-equip-title">维修进度</div>
      <px-table :data="processTableData" class="equip-table" size="small" max-height="400" border>
        <px-table-column
          v-for="(item, index) in processTableColumns"
          :key="index"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">
            {{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}
          </template>
        </px-table-column>
      </px-table>
    </px-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { queryDealProcess } from "@/api/equip/maintain";
import { reactive, toRefs, watchEffect } from "vue";

const props = defineProps(["taskId", "activeName"]);

const state = reactive<any>({
  processTableData: [],
  processTableColumns: [
    { prop: "nodeName", label: "节点名称", minWidth: "160", showOverflowTooltip: true },
    { prop: "operatorName", label: "操作人", minWidth: "160", showOverflowTooltip: true },
    { prop: "operationTime", label: "操作时间", minWidth: "160", showOverflowTooltip: true },
    { prop: "remark", label: "备注", minWidth: "160", showOverflowTooltip: true }
  ]
});
const { processTableData, processTableColumns } = toRefs(state);

// 进入页面获取table信息
watchEffect(async () => {
  if (props.activeName === "fifth") {
    const res = await queryDealProcess({ workOrderId: props.taskId });
    processTableData.value = res || [];
  }
});
</script>
<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");

.view-equip-detail-wrap {
  .view-equip-detail {
    height: calc(100vh - 439px);
    padding: 0;
  }
}
</style>
